<template>
    <div>
        <div class="header-hint">请选择投诉该账号的原因：</div>
        <div class="complains-list">
            <template v-for="(item, index) in complaintData" :key="index">
                <div class="item" @click="handleClick(item)">
                    <span style="font-size: 18px;">{{ item.name }}</span>
                    <van-icon name="arrow" />
                </div>
            </template>
        </div>
        <div class="notice" @click="goNotice">
            投诉须知
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const complaintData = ref([])

const handleClick = (item) => {
    if (item.subReasonList.length === 0) {
        router.push({
            path: '/info',
            query: {
                id: item.id,
                name: item.name
            }
        })
    } else {
        router.push({
            path: '/test',
            query: {
                id: item.id,
            }
        })
    }
}

/**
 * 递归查找匹配ID的节点并返回其子项列表
 * @param {Array} nodes - 当前层节点数组
 * @param {number|string} targetId - 要匹配的目标ID
 * @returns {Array|null} - 返回子项数组，未找到返回null
 */
const findSubReasonsById = (nodes, targetId) => {
    // 遍历当前层级所有节点
    for (const node of nodes) {
        // 找到直接返回子项
        if (node.id === targetId) {
            return node.subReasonList || [];
        }
        // 递归搜索子节点
        if (node.subReasonList?.length) {
            const result = findSubReasonsById(node.subReasonList, targetId);
            if (result) return result;
        }
    }
    return null; // 未找到
}

const initData = () => {
    const originData = JSON.parse(sessionStorage.getItem("treeData"));
    complaintData.value = findSubReasonsById(originData, +route.query.id)
}

const goNotice = () => {
    router.push({
        path: '/notice',
    });
}

watch(() => route.query.id, (v) => {
    initData()
})

onMounted(() => {
    initData()
})
</script>

<style lang="less" scoped>
.title {
    color: #fff;
    font-size: 16px;
}

:deep(.van-nav-bar__content) {
    background: #1989fa;
}

.arrow-left-icon {
    margin-right: 10px;
}

.header-hint {
    font-size: 16px;
    padding: 10px 16px;
    background: #ededed;
    color: #939393;
}

.complains-list {
    padding: 0px 6px;
    background: #fff;
}

.item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #f5f5f5;
    height: 54px;
    align-items: center;
}

.prevent-fraud {
    padding: 6px 16px;
    font-size: 12px;
    color: #6999ed;
}

.notice {
    margin-top: 24px;
    text-align: center;
    font-size: 14px;
    color: #6999ed;
}
</style>